<script setup lang='ts'>
const min = ref<number>()
const max = ref<number>()

const skuPrice = defineModel<string>('skuPrice', { required: true })

function validateCompare() {
    if (min.value && max.value) {
        if (min.value > max.value) {
            ElMessage.error('价格区间有误, 请重新输入!')
            min.value = undefined
            max.value = undefined
        }
        skuPrice.value = `${min.value}-${max.value}`
    }
}

watchEffect(() => {
    if (skuPrice.value) {
        console.log(skuPrice.value)
        const [minData, maxData] = skuPrice.value.split('-')
        minData && (min.value = Number(minData))
        maxData && (max.value = Number(maxData))
    }
})
</script>

<template>
    <div class="space-x-8 flex items-center">
        <el-input-number v-model="min"
                         placeholder="请输入"
                         :min="1"
                         :max="999999"
                         controls-position="right"
                         @change="validateCompare"
        />

        <span>-</span>

        <el-input-number v-model="max"
                         placeholder="请输入"
                         :min="1"
                         :max="999999"
                         controls-position="right"
                         @change="validateCompare"
        />
    </div>
</template>
